---
title: Combobox
description: A searchable dropdown component combining input and selection features.
metaDescription: Combobox for React and Solid.js with searchable input and dropdown selection. Build accessible autocomplete and typeahead experiences.
category: forms
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/combobox.ts
  ark: https://ark-ui.com/docs/components/combobox
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Combobox } from '@/components/ui'
```

```tsx
<Combobox.Root>
  <Combobox.Label />
  <Combobox.Control>
    <Combobox.Input />
    <Combobox.IndicatorGroup>
      <Combobox.ClearTrigger />
      <Combobox.Trigger />
    </Combobox.IndicatorGroup>
  </Combobox.Control>
  <Combobox.Positioner>
    <Combobox.Content>
      <Combobox.Empty />
      <Combobox.Item />
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel />
        <Combobox.Item />
      </Combobox.ItemGroup>
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>
```

To setup combobox, you might need to import the following hooks:

- `useListCollection`: Used to manage the list of items in the combobox, providing helpful methods for filtering and mutating the list.
- `useFilter`: Used to provide the filtering logic for the combobox based on [`Intl.Collator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) APIs.

## Examples

### Sizes

Use the `size` prop to adjust the size of the combobox.

<ComponentExample name="sizes" />

### Variants

Use the `variant` prop to adjust the visual style of the combobox.

<ComponentExample name="variants" />

## Props

### Root

<PropsTable part="Root" />

### Item

<PropsTable part="Item" />

### Trigger

<PropsTable part="Trigger" />